<template>
  <div class="contentContainer">
    <!-- 列表渲染商品信息 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column label="橱窗图" width="120">
        <template #default="scope">
          <div style="width: 100px; height: 100px; overflow: hidden;">
            <el-image
              style="width: 100%; height: 100%;"
              :src="scope.row.image"
              fit="fill"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="100" />
      <el-table-column prop="brand" label="商品品牌" width="100" />
      <el-table-column
        prop="description"
        label="商品描述"
        width="240"
      ></el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="category.name"
        label="类别"
        width="80"
      ></el-table-column>
      <el-table-column prop="price" label="价格/元" width="80"></el-table-column>
      <el-table-column
        prop="discounted_price"
        label="折扣价/元"
      ></el-table-column>
      <el-table-column prop="stock" label="库存" width="80"></el-table-column>
      <el-table-column label="状态" width="80">
        <template #default="scope">
          <el-tag
            :type="scope.row.status == 0 ? 'info' : 'success'"
          >{{ scope.row.status == 0 ? '未上架' : '已上架' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" @click="updateGoods(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteGoods(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 用来加载下一页数据 -->
    <div
      v-show="hasMore"
      style="width: 100%; text-align: center; margin-top: 15px; color: grey;"
      @click="loadData"
    >
      点击加载更多
    </div>
  </div>
</template>
<script lang="ts" setup>

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
import { RequestPath, startRequest } from '../base/RequestWork';
import type {GoodsResponseData, GoodsItemData } from '../base/RequestWork';
import { ref } from 'vue';

// 初始化路由实例
const router = useRouter();

// 商品列表数据
const tableData = ref<GoodsItemData[]>([]);
// 分页偏移量（已加载数据总数）
let offset = 0;
// 每页加载数量
const limit = ref(10); // 假设默认每页加载10条，可根据实际需求调整
// 是否还有更多数据（控制"加载更多"按钮显示）
const hasMore = ref(true);

// 组件挂载时加载初始数据
onMounted(() => {
  loadData();
});

// 从服务端获取商品数据（支持加载更多）
function loadData() {
  startRequest(RequestPath.goodsListGet, 'get', { offset, limit: limit.value })
    .then((response) => {
      // 类型断言：将响应数据转为商品列表响应格式
      const data = response as GoodsResponseData;
      // 初始化/获取已有的商品列表数据
      let datas: GoodsItemData[] = tableData.value ?? [];
      
      // 判断是否还有更多数据：若返回数据量小于每页限制，说明已加载完所有数据
      hasMore.value = (data.datas ?? []).length >= limit.value;
      
      // 将新获取的数据追加到现有列表中
      datas.push(...(data.datas ?? []));
      // 更新商品列表数据
      tableData.value = datas;
      
      // 更新偏移量：下一次加载从"已加载总数"开始
      offset = datas.length;
    })
    .catch((error) => {
      // 增强错误处理：安全访问error.response
      let errorMessage = '加载商品数据失败';
      if (error?.response?.data?.error) {
        errorMessage = error.response.data.error;
      } else if (error?.message) {
        errorMessage = error.message;
      }
      // 加载失败提示
      ElMessage.error({ message: errorMessage });
    });
}

// 跳转到商品编辑页面
function updateGoods(goods: GoodsItemData) {
  // 携带"编辑模式（mode=1）"和"商品ID"参数跳转
  router.replace({ 
    name: 'goodsedit', 
    params: { mode: 1, id: goods.id } 
  });
}

// 删除商品（带二次确认）
function deleteGoods(goods: GoodsItemData) {
  // 弹出二次确认弹窗
  ElMessageBox.confirm(
    '确认删除该商品吗？删除后不可恢复！', 
    '删除提示', 
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning' // 警告类型弹窗（可选，增强视觉提示）
    }
  )
    .then(() => {
      // 用户点击"确认"：调用删除接口
      startRequest(RequestPath.goodsDelete, 'post', { id: goods.id })
        .then(() => {
          // 删除成功提示
          ElMessage.success({ message: '商品删除成功！' });
          // 重置分页状态，重新加载数据（确保列表刷新）
          offset = 0;
          tableData.value = [];
          loadData();
        })
        .catch((error) => {
          // 增强错误处理：安全访问error.response
          let errorMessage = '删除商品失败';
          if (error?.response?.data?.error) {
            errorMessage = error.response.data.error;
          } else if (error?.message) {
            errorMessage = error.message;
          }
          // 删除失败提示
          ElMessage.error({ message: errorMessage });
        });
    })
    .catch(() => {
      // 用户点击"取消"：取消删除操作（可选添加取消提示）
      ElMessage.info({ message: '已取消商品删除' });
    });
}
</script>